<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
       <span  class="table-page-search-submitButtons">
        <a-button  @click="loadData" type="primary" icon="redo">刷新</a-button>
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
       </span>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        :columns="columns"
        size="middle"
        bordered
        :rowKey="(r)=>r.data.id"
        :pagination="false"
        :dataSource="dataSource"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">

        <span slot="action" class="table-operator" slot-scope="text, record">
          <a @click="handleEdit(record.data)">编辑</a>
          <a href="javascript:;" @click="handleAddSub(record)">添加子菜单</a>
          <a href="javascript:;" @click="handleDelete(record.data.id)">删除</a>

        </span>
        <!-- 字符串超长截取省略号显示 -->
        <span slot="url" slot-scope="text">
          <ak-ellipsis :value="text" :length="25"/>
        </span>
        <!-- 字符串超长截取省略号显示-->
        <span slot="component" slot-scope="text">
          <ak-ellipsis :value="text"/>
        </span>
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text" :length="25"/>
        </span>
      </a-table>

    </div>
    <!-- table区域-end -->

    <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>

  </a-card>
</template>

<script>
  import PermissionModal from './modules/PermissionModal';
  import AkEllipsis from '../../components/akfh/AkEllipsis';
  import {sysPermissionUrl} from '../../api/url';
  import {getAction} from '../../api/manage';
  import AkfhListMixin from '../../mixin/AkfhListMixin';

  const columns = [
    {
      title: '名称',
      dataIndex: 'data.name',
      scopedSlots: { customRender: 'ellipsis' },
    }, {
      title: '类型',
      dataIndex: 'data.menuType_dictText',
      scopedSlots: { customRender: 'ellipsis' },

    },{
      title: '权限编码',
      dataIndex: 'data.perms',
      scopedSlots: { customRender: 'ellipsis' },
    },{
      title: 'icon',
      dataIndex: 'data.icon',
      scopedSlots: { customRender: 'ellipsis' },
    },
    {
      title: '组件',
      dataIndex: 'data.component',
      key: 'component',
      scopedSlots: { customRender: 'ellipsis' },
    },
    {
      title: '路径',
      dataIndex: 'data.url',
      scopedSlots: { customRender: 'ellipsis' },
    },
    {
      title: '排序',
      dataIndex: 'data.sortNo',
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 250
    }
  ]

  export default {
    name: 'PermissionList',
    mixins: [AkfhListMixin],
    components: {
      PermissionModal,
      AkEllipsis,
    },
    data() {
      return {
        description: '这是菜单管理页面',
        // 表头
        ipagination:false,
        columns: columns,
        isorter:{
          column: 'sortNo',
          order: 'asc',
        },
        url: sysPermissionUrl
      }
    },
    methods: {

      handleAddSub(record) {
        this.$refs.modalForm.title = "添加子菜单";
        this.$refs.modalForm.localMenuType = 'MENU';
        this.$refs.modalForm.disableSubmit = false;
        this.$refs.modalForm.edit({routeFlag:'TRUE','parentId':record.data.id});
      },

    }
  }
</script>
<style scoped>
  @import "../../assets/less/common.less";
</style>
